<template>
  <div id="header">
    <div class="header-left">
      <el-button
        @click="handleCollapse"
        size="mini"
        icon="el-icon-menu"
      ></el-button>
      <!-- tagList -->
      <el-breadcrumb style="margin-left:20px" separator="/">
        <el-breadcrumb-item v-for="t in tagList" :key="t.name" :to="{ path: t.path }">
          {{t.label}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header-right">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img src="@/assets/images/f1.png" alt="head" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Cookie from 'js-cookie'
export default {
  name: "Header",
  methods: {
    handleCollapse() {
      // 此处修改状态没有复杂的业务逻辑，所以直接提交
      this.$store.commit("navigation/COLLAPSE");
    },
    // 退出登录
    logout(){
      if(confirm('确定退出吗？')){
        Cookie.remove('token')
        localStorage.removeItem('menu')
        this.$router.replace('/login')
      }
    }
  },
  computed: {
    ...mapState("header", ["tagList"]),
  },
};
</script>

<style lang='less' scoped>
#header {
  width: 100%;
  height: 60px;
  background-color: #555;
  display: flex;
  justify-content: space-between;
  .header-left {
    line-height: 60px;
    display: flex;
    align-items: center;
    // 样式的穿刺
    /deep/.el-breadcrumb__item{
      .el-breadcrumb__inner{
        font-weight: normal;
        &.is-link{
          color: rgb(196, 194, 194);
        }
      }
      &:last-child{
        .el-breadcrumb__inner{
          &.is-link{
            color: white;
          }
        }
      }
    }
  }
  .header-right {
    margin-top: 10px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
}
</style>